<template>
	<view class="content">
		
		<view class="list">
			<view class="input-item">
				<text class="tit">昵称</text>
				<input 
					type="text" 
					v-model="userxm" 
					placeholder="请输入不超过12位的昵称"
					maxlength="12"
					data-key="userxm"
				/>
			</view>
		</view>
		<view class="dlbutton" hover-class="dlbutton-hover" @tap="bindLogin()">
			<text>提交</text>
		</view>

	</view>
</template>

<script>
	import userApi from '../../../api/user.js';
	var _this,js;
	export default {
		data() {
			return {
				userxm:'',
			}
		},
		onLoad(query){
			_this = this;
		    _this.userxm=query.userxm;
		},
		computed:{
		
		},
		methods: {
			bindLogin() {
				var rule = [
				    {name:"userxm", checkType : "string",checkRule:"1,",  errorMsg:"请输入您的昵称"},
				];
				let checkData = {'userxm':_this.userxm}
				var checkRes = _this.$graceChecker.check(checkData,rule)
				if(!checkRes){
					 uni.showToast({
					    icon: 'none',
					    title: _this.$graceChecker.error
					});
					return;
				}
				 let userInfo = uni.getStorageSync('user');
				 userInfo.userxm = _this.userxm
				 userInfo.phone = userInfo.username
				 // let data={
					// 'userxm':_this.userxm,
					// 'usercode':usercode,
					// 'sex':sex,
					// 'wechat':wechat,
					// 'qq':qq,
					// 'phone':username,
					// 'pic':pic
					// 
				 // }
				 console.log(userInfo)
				userApi.updateMaterial(userInfo).then(res=>{
					if(res.status==='0'){
						uni.showToast({
						    icon: 'success',
						    title: '修改成功'
						});
						// _this.getUserinfo();
						uni.setStorageSync('user',userInfo)
					}
				}).catch(err=>{
						console.log(err)
				})
				
			},
			// getUserinfo(){
			//     let {usercode} = uni.getStorageSync('user')
			// 	userApi.userInfo({usercode}).then(res=>{
			// 		console.log(res);
			// 		if(res.status==='0'){
			// 			uni.setStorageSync('user',res.data)
			// 		}
			// 		
			// 	}).catch(err=>{
			// 		console.log(err)
			// 	})
			// },
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.tishi {
		color: #999999;
		font-size: 28upx;
		line-height: 50upx;
		margin-bottom: 50upx;
	}
    .list {
    	display: flex;
    	flex-direction: column;
    	padding-top: 50upx;
    	padding-left: 70upx;
    	padding-right: 70upx;
    }
    .list-call{
    	display: flex;
    	flex-direction: row;
    	justify-content: space-between;
    	align-items: center;
    	height: 100upx;
    	color: #333333;
    	border-bottom: 1upx solid rgba(230,230,230,1);
    }
    .list-call .img{
    	width: 40upx;
    	height: 40upx;
    }
    .list-call .biaoti{
    	flex: 1;
    	text-align: left;
    	font-size: 32upx;
    	line-height: 100upx;
    	margin-left: 16upx;
    }
	
	.yzm {
		color: #FF7D13;
		font-size: 24upx;
		line-height: 64upx;
		padding-left: 10upx;
		padding-right: 10upx;
		width:auto;
		height:64upx;
		border:1upx solid rgba(255,131,30,1);
		border-radius: 50upx;
	}
	.yzms {
		color: #999999 !important;
		border:1upx solid #999999;
	}
	.dlbutton {
		color: #FFFFFF;
		font-size: 30upx;
		width:470upx;
		height:70upx;
		background: $uni-color-primary;
		line-height: 70upx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100upx;
		border-radius: 50upx;
	}
	.input-item{
		position: relative;
		display:flex;
		flex-direction: column;
		align-items:flex-start;
		justify-content: center;
		padding: 0 30upx;
		background:$page-color-light;
		height: 120upx;
		border-radius: 5px;
		margin-top: 30upx;
		&:last-child{
			margin-bottom: 0;
		}
		.tit{
			height: 50upx;
			line-height: 56upx;
			font-size: $font-sm+2upx;
			color: $font-color-base;
		}
		input{
			height: 60upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			width: 100%;
		}	
		.ion-img{
			width: 35upx;
			height: 35upx;
			position: absolute;
			bottom:24upx;
			right: 20upx;
		}
	}
</style>
